<template>
  <div class="be-coming-soon-content">
    <div class="be-coming-soon-content-scroll">
      <!-- 电影块 -->
      <div class="movie-chunk">
        <!-- 电影块时间 -->
        <div class="movie-chunk-time">时间</div>
        <!-- 片名和预约 -->
        <div class="movie-chunk-entirety">
          <!-- 片名 -->
          <div class="m-name">片名</div>
          <!-- 预约 -->
          <div class="m-subscribe">预约</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FissionFriendsH5NewChunk',
  props: {
    // 时间
    time: {
      type: String
    },
    // 片名
    name: {
      type: String
    },
    // 预约
    subscribe: {
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
// 内容区
.be-coming-soon-content {
  display: flex;
  margin-top: 3px;
  overflow-x: auto;
  // overflow-y: scroll;
  .be-coming-soon-content-scroll {
    display: flex;
    // min-width: 100%;
    // 电影块
    .movie-chunk {
      position: relative;
      width: 150px;
      height: 150px;
      background-color: beige;

      // 电影上线时间
      .movie-chunk-time {
        position: absolute;
        text-align: center;
        top: 0;
        left: 0;
        width: 100%;
        background-color: plum;
      }
      // 片名和预约模块
      .movie-chunk-entirety {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        background-color: antiquewhite;
        // margin-top: 4px;
        // 片名
        // .m-name {
        // }
        // 预约
        .m-subscribe {
          margin: 3px 10px;
          border-radius: 5px;
          background-color: pink;
        }
      }
      // margin-right: 10px;
    }
    .movie-chunk:nth-child(2) {
      margin: 0 10px;
    }
  }
  .be-coming-soon-content-scroll::-webkit-scrollbar {
    display: none;
  }
}
</style>
